<template>
  <div class="LabelDisplay">
    <div class="title">{{ text }}</div>
    <ul class="clearfix">
      <li
        :class="{ highlight: highlightName === item }"
        @click="liBtn(item)"
        v-for="(item, index) in list"
        :key="index"
        v-show="index < 8 || show"
      >
        {{ item }}
      </li>
    </ul>
    <div @click="show = !show" class="down" v-if="list.length > 8">
      {{ !show ? '展开' : '收起' }}

      <span v-if="show" class="toutiao toutiao-z045"></span>
      <span v-else class="toutiao toutiao-xiala"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LabelDisplay',
  data () {
    return {
      show: false,
      highlightName: '',
      formDate: {}
    }
  },
  methods: {
    liBtn (item) {
      this.highlightName = item
      var text = this.text
      this.formDate = { [text]: item }
      this.$emit('sonDate', this.formDate)
    },
    clear () {
      this.highlightName = ''
      this.formDate = {}
    }
  },
  props: {
    text: {
      type: String,
      required: true
    },
    list: {
      type: [],
      required: true
    }
  }
}
</script>

<style scoped lang="less">
.LabelDisplay {
  padding: 3px 42px;
  font-size: 28px;
  ul {
    margin-top: 42px;
    font-size: 22px;
    width: 100%;
    li {
      box-sizing: border-box;
      border: 2px solid #7b7777;
      border-radius: 30px;
      padding: 7px 0px;
      color: #7b7777;
      text-align: center;
      float: left;
      width: 20%;
      margin: 0 2%;
      margin-bottom: 26px;
    }
    .highlight {
      background-color: #7b7777;
      color: #fff;
    }
  }
  .down {
    text-align: center;
  }
}
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
  *zoom: 1;
}
</style>
